<template>
  <div class="jindu-zbox">
    <div class="gangkou-zbox">
      <div
        class="qu-logo"
        :style="{ backgroundImage: `url(${backgroundimg})` }"
      >
        <div class="xvhao">{{ Index + 1 }}</div>
      </div>
      <div class="qv-name">{{ name }}</div>
      <div class="value-zbox">{{ value }}</div>
    </div>
    <div class="jindu-zoutbox">
      <div
        class="jindu-zinbox"
        :style="{ width: value, background: bgcolor }"
      ></div>
    </div>
  </div>
</template>

<script setup>
const { name, value } = defineProps({
  name: String,
  value: String,
  bgcolor: String,
  backgroundimg: String,
  Index: Number
})
</script>

<style scoped>
.qu-logo {
  width: 37px;
  height: 15px;
  background-size: 100% 100%;
  line-height: 15px;
  color: #fff;
  font-size: 11px;
  box-sizing: border-box;
}
.xvhao {
  width: 15px;
  height: 15px;
  /* background-color: pink; */
  text-align: center;
  line-height: 15px;
}

.qv-name {
  position: absolute;
  left: 20px;
  color: #fff;
  margin-left: -50;
  /* background-color: red; */
}
.jindu-zbox {
  width: 100%;
  /* height: 2.5vw; */
  display: flex;
  flex-direction: column;
  /* margin-top: 2.5vw; */
}

.gangkou-zbox {
  width: 100%;
  height: 5vw;
  display: flex;

  align-items: center;
  margin-bottom: 1vw;
  font-size: 14px;
}

.gangkou-zbox .value-zbox {
  text-align: right;
  color: #fff;
  position: absolute;
  right: 0px;
  font-size: 16px;
  font-weight: 600;
}

.jindu-zoutbox {
  width: calc(100% - 0vw);
  height: 2.5vw;
  background: rgba(255, 255, 255, 0.05);
  /* border-radius: 10px; */
}

.jindu-zinbox {
  height: 100%;
  /* border-radius: 10px; */
}
</style>
